import React from 'react';

interface FontSizeControlProps {
  size: 'small' | 'medium' | 'large';
  onChange: (size: 'small' | 'medium' | 'large') => void;
}

const FontSizeControl: React.FC<FontSizeControlProps> = ({ size, onChange }) => {
  return (
    <div className="flex items-center justify-center px-6 py-3 bg-white border-b border-gray-100">
      <div className="flex items-center">
        <span className="text-gray-600 mr-2">字号设置:</span>
        <div className="flex items-center space-x-3 bg-gray-50 px-4 py-2 rounded-lg">
          {[
            { value: 'small', label: '小' },
            { value: 'medium', label: '中' },
            { value: 'large', label: '大' }
          ].map((fontSize) => (
            <button
              key={fontSize.value}
              onClick={() => onChange(fontSize.value as 'small' | 'medium' | 'large')}
              className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-200 ${
                size === fontSize.value
                  ? 'bg-green-500 text-white shadow-sm'
                  : 'bg-transparent text-gray-600 hover:bg-gray-100'
              }`}
            >
              {fontSize.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FontSizeControl;